<template>
  <div class="dashboard-container">
    <div class="app-container">
      <a-card class="tools-card">
        <a-button type="primary" @click="showDialog = true">新增员工</a-button>
      </a-card>
      <a-card>
        <a-table
          :columns="columns"
          :dataSource="list"
          :pagination="{
            current: pageParams.page,
            pageSize: pageParams.size,
            total: pageParams.total,
            onChange: changePage
          }"
        >
          <template #bodyCell="{ column, record }">
            <a-avatar v-if="column.dataIndex === 'staffPhoto'" :src="record.staffPhoto"></a-avatar>
            <a-space v-if="column.dataIndex === 'operate'">
              <a-button type="primary" @click="detailRow(record.id)">查看</a-button>
              <a-button type="danger" @click="delRow(record.id)">删除</a-button>
            </a-space>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
  <add-employee v-model:show-dialog="showDialog" @refreshList="getList"></add-employee>
  <card-employee v-model:show-detail="showDetail" :user-id="userId"></card-employee>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getEmployeeList, delEmployee } from '@/api/employee'
import { Modal, message } from 'ant-design-vue'
import AddEmployee from './components/add-employee.vue'
import CardEmployee from './components/card-employee.vue'

const showDetail = ref(false)
const userId = ref(null) // 用户id
const columns = [
  {
    title: '序号',
    customRender: ({ index }) => {
      return index + 1 + (pageParams.page - 1) * pageParams.size
    }
  },
  {
    title: '姓名',
    dataIndex: 'username'
  },
  {
    title: '头像',
    dataIndex: 'staffPhoto'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '工号',
    dataIndex: 'workNumber'
  },
  {
    title: '聘用形式',
    dataIndex: 'formaOfEmployment'
  },
  {
    title: '部门',
    dataIndex: 'departmentName'
  },
  {
    title: '入职时间',
    dataIndex: 'timeOfEntry'
  },
  {
    title: '操作',
    dataIndex: 'operate'
  }
]

const list = ref([])
const showDialog = ref(false) // 管理弹层显示

const pageParams = reactive({
  page: 1,
  size: 10,
  total: 0
})
onMounted(() => {
  getList()
})
const getList = async () => {
  const { rows, total } = await getEmployeeList(pageParams)
  list.value = rows
  pageParams.total = total
}
const changePage = (page, pagesize) => {
  pageParams.page = page
  pageParams.pagesize = pagesize
  getList()
}
const detailRow = (id) => {
  showDetail.value = true
  userId.value = id
}
const delRow = (id) => {
  Modal.confirm({
    content: '确认删除该用户吗',
    onOk: async () => {
      await delEmployee(id)
      message.success('删除成功')
      getList()
    }
  })
}
</script>
<style scoped>
.app-container {
  padding: 16px;
}
.tools-card {
  margin-bottom: 16px;
}
</style>
